<template> 
<div>
  <div class="download" @click="download">
    <div class="download-left">
      <span>
        <img src="https://s1.ljcdn.com/mensa/static/m/images/common/logo300x300.png?_v=20210804120110f4d" alt="">
      </span>
      <div class="download-left-conent">
        <p class="p1">贝壳找房APP</p>
        <p class="p2">及时获知房源动态变化</p> 
      </div>
        
    </div>
    <div class="download-right">
      <button>立即打开</button>
      </div>
  </div>


  <div class="header">
    <div class="header-l">
      <van-icon name="arrow-left" size="0.25rem" color="#3072f6" class="icon1" />
      <!-- 此处跳转城市界面 -->
      <a href="#">
        <p>北京
        <van-icon name="arrow-down" size="0.1rem" color="#666" class="icon2" />
      </p>
      </a>
      
      
    </div>

    <div class="header-c">
      <img src="https://s2.ljcdn.com/mensa/static/m/images/common/logo_beikezhaofang.png?id=20180504&version=g14rir9l9b" class="logo">
    </div>

    <div class="header-r">
      <van-icon name="contact" size="0.25rem" color="#3072f6" class="icon3"/>
    </div>
    
    
  </div>


  <div class="line"></div>

  <div class="empty">
    <van-empty description="沒有关注房源" />

  </div>
 

</div>


</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);
import { Empty } from 'vant';
Vue.use(Empty);

export default {
  methods:{
    download(){
     console.log('此处跳转至app下载界面')
     window.location.href='https://apps.apple.com/cn/app/id1347663353';
    }
  }


}
</script>

<style lang='stylus' scoped>

a
  color #000

// 顶部APP下载广告
.download
  padding   0.2rem
  height 0.9rem
  display flex
  justify-content space-between

.download span
  width 0.5rem
  float left
  margin-right 0.1rem

.download img
  width 100%

.download-left
  height 0.5rem

.download-left-conent
  height 0.5rem
  width 2.3rem


.p1
  font-weight 700
  font-size 0.16rem
.p2
  color #888

.download-right
  flex 1
  text-align right 
  height 0.5rem
  padding 0.1rem

.download-right button
  background-color #3072f6
  width 0.85rem
  height 0.35rem
  border-radius 0.1rem
  color #fff
  border none

// 分割线
.line
  width 100%
  border-bottom  1px solid #eee


// 顶部导航栏

.header
  height 0.5rem
  display flex
  justify-content space-between
  padding 0.1rem 0.2rem

.header-l
  display flex
  line-height 0.3rem
  position relative


.logo
  height 0.3rem

.icon1
  margin-top 0.05rem
  margin-right 0.18rem
.icon2
  position absolute
  top 0.11rem



.header-r
  padding 0.05rem 0
  



</style>
